<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="areaChoice" id="areaChoice" style="display: none;">
	<div class="areaChoice-left">
		<div class="areaChoice-left-con">
			<div class="areaChoice-leftpro">选择省</div>
			<ul id="provincechioce" name="provinceId" class="citychioce"></ul>
		</div>	
	</div>
	<div class="areaChoice-middle">
		<div class="areaChoice-middle-con">
			<div class="areaChoice-leftpro">选择市</div>
			<ul id="citychioce" name="cityId" class="citychioce"></ul>
		</div>
	</div>
	
	<div class="areaChoice-right">
		<div class="areaChoice-right-con">
			<div class="areaChoice-rightpro">选择区</div>
			<ul id="areachioce" name="areaId" class="citychioce"></ul>
		</div>
	</div>
	
</div>

<div class="areaChoice" id="areaChoiceTwo" style="display: none;">
	<div class="areaChoice-left">
		<div class="areaChoice-left-con">
			<div class="areaChoice-leftpro">选择省</div>
			<ul id="provincechioceTwo" name="provinceId" class="citychioce"></ul>
		</div>	
	</div>
	<div class="areaChoice-middle">
		<div class="areaChoice-middle-con">
			<div class="areaChoice-leftpro">选择市</div>
			<ul id="citychioceTwo" name="cityId" class="citychioce"></ul>
		</div>
	</div>
</div>

<!-- 地区选择 -->
<script type="text/javascript">
//三级
function changepro(obj){
	$(obj).addClass("proactive");
	$(obj).siblings("li").removeClass("proactive");
	var province = $(obj).attr("value");
	selectCitiesLayer(province, null, function(){
		var city = $(obj).parents(".areaChoice-left").siblings(".areaChoice-middle").find("#citychioce li:eq(0)").attr("value");
		if(typeof(city) === "undefined" ){
			selectAreasLayer("000000000000");//全无
		}else{
			$("#citychioce").children("li:eq(0)").addClass("proactive"); 
			selectAreasLayer(city);
		}
	});
}

function citychoiceone(obj){
	$(obj).addClass("proactive");
	$(obj).siblings("li").removeClass("proactive");
	var city = $(obj).attr("value");
	var area = $(obj).parents(".areaChoice-middle").siblings(".areaChoice-right").find("#areachioce li:eq(0)").attr("value");
	selectAreasLayer(city);
}


//两级
function changeproTwo(obj){
	$(obj).addClass("proactive");
	$(obj).siblings("li").removeClass("proactive");
	var province = $(obj).attr("value");
	phoneCities(province);
}


/**
 * 区
 */
function selectAreasLayer(city, area){
	if(!city || city == '') {return;}
	$.dpAjax({
		show:false,
 		url:'${basePath}/YwBusinessCarAreaPriceController/selectAreas',
			data:{cityId:city},
			success: function(datas){
				  var data = datas.result;
				  var html = "";
				  var firstFlag = true;
				  for(var i in data) {
					  if(firstFlag && !area) {
						firstFlag = false;
						html += "<li ondblclick='areachoiceone(this);'  value='" +i+ "'>" + data[i]+ "</li>";
					  } else if(area && area == i){
						html += "<li ondblclick='areachoiceone(this);'  value='" +i+ "'>" + data[i]+ "</li>";
					  } else {
						html += "<li ondblclick='areachoiceone(this);'  value='" +i+ "'>" + data[i]+ "</li>";
					  }
				  }
				  html += "<li ondblclick='areachoiceone(this);' class='dp-color-red'>未知地区</li>";
				  $("#areachioce").html(html);
				  return;
         	}
 		});
}



/**
 * 市
 */
function selectCitiesLayer(province, city, fn){
	if(!province || province == '') {return;}
	$.dpAjax({
		show:false,
 		url:'${basePath}/YwBusinessCarAreaPriceController/selectCities',
			data:{provinceId:province},
			success: function(datas){
 				var data = datas.result;
 				var html = '';
 				var firstFlag = true;
 				  for(var i in data) {
 					  if(firstFlag && !city) {
 						firstFlag = false;
 				  		html += "<li onclick='citychoiceone(this,"+province+");' value='" +i+ "'>" + data[i]+ "</li>";
 					  } else if(city && city == i){
 						 html += "<li onclick='citychoiceone(this,"+province+");'  value='" +i+ "'>" + data[i]+ "</li>";
 					  } else {
 						 html += "<li onclick='citychoiceone(this,"+province+");' value='" +i+ "'>" + data[i]+ "</li>";
 					  }
 				  }
 				  $("#citychioce").html(html);
 				  if(fn){
 					  fn();
 				  }
         }
 	});
}
/**
 * 省
 */
function selectProvincesLayer(province,callback){
	$.dpAjax({
		show:false,
 		url:'${basePath}/YwBusinessCarAreaPriceController/selectProvinces',
		data:{},
		success: function(datas){
				var data = datas.result;
				var html = '';
				var firstFlag = true;
				  for(var i in data) {
					  if(firstFlag &&　!province) {
						firstFlag = false;
				  		html += "<li onclick='changepro(this);' value='" +i+ "'>" + data[i]+ "</li>";
					  } else if(province && province == i){
						 html += "<li onclick='changepro(this);' value='" +i+ "'>" + data[i]+ "</li>";
					  } else {
						 html += "<li onclick='changepro(this);' value='" +i+ "'>" + data[i]+ "</li>";
					  }
				  }
				 $("#provincechioce").html(html);
				 if(callback){
					 callback();
				 }
        }
	});
}


/**
 * 市//两级
 */
function phoneCities(province, city, fn){
	if(!province || province == '') {return;}
	$.dpAjax({
		show:false,
 		url:'${basePath}/YwBusinessCarAreaPriceController/selectCities',
			data:{provinceId:province},
			success: function(datas){
 				var data = datas.result;
 				var html = '';
 				var firstFlag = true;
 				  for(var i in data) {
 					  if(firstFlag && !city) {
 						firstFlag = false;
 				  		html += "<li ondblclick='poneCitychoice(this,"+province+");' value='" +i+ "'>" + data[i]+ "</li>";
 					  } else if(city && city == i){
 						 html += "<li ondblclick='poneCitychoice(this,"+province+");'  value='" +i+ "'>" + data[i]+ "</li>";
 					  } else {
 						 html += "<li ondblclick='poneCitychoice(this,"+province+");' value='" +i+ "'>" + data[i]+ "</li>";
 					  }
 				  }
 				  $("#citychioceTwo").html(html);
 				  if(fn){
 					  fn();
 				  }
         }
 	});
}
/**
 * 省//两级
 */
function phoneProvinces(province,callback){
	$.dpAjax({
		show:false,
 		url:'${basePath}/YwBusinessCarAreaPriceController/selectProvinces',
		data:{},
		success: function(datas){
				var data = datas.result;
				var html = '';
				var firstFlag = true;
				  for(var i in data) {
					  if(firstFlag &&　!province) {
						firstFlag = false;
				  		html += "<li onclick='changeproTwo(this);' value='" +i+ "'>" + data[i]+ "</li>";
					  } else if(province && province == i){
						 html += "<li onclick='changeproTwo(this);' value='" +i+ "'>" + data[i]+ "</li>";
					  } else {
						 html += "<li onclick='changeproTwo(this);' value='" +i+ "'>" + data[i]+ "</li>";
					  }
				  }
				 $("#provincechioceTwo").html(html);
				 if(callback){
					 callback();
				 }
        }
	});
}
</script>